

<template>
  <div>
    <div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
      <img src="/src/assets/beams.jpg" alt="" class="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" />
      <div class="login-part relative bg-white px-6 pb-8 pt-10 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
        <div class="mx-auto max-w-md">
          <n-spin :show="loading">
            <div class="divide-y divide-gray-300/50">
              <h2>登录</h2>
              <h3>账号:admin 密码:123</h3>
              <n-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                size="large"
              >
                <n-form-item path="user.username">
                  <n-input v-model:value="formData.user.username" placeholder="输入账号" />
                </n-form-item>
                <n-form-item path="user.password">
                  <n-input 
                    v-model:value="formData.user.password" 
                    type="password"
                    show-password-on="mousedown"
                    :maxlength="8" placeholder="输入密码" />
                </n-form-item>
              </n-form>
              <n-button  @click="loginSubmit" >
                  登录
              </n-button>
            </div>
          </n-spin>
          
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 
<script setup lang="ts">
import { inject, onMounted, ref,onBeforeMount } from 'vue'
import { useMainStore } from "@/store"
const mainStore = useMainStore()
const count = ref(0)

const formRef = ref<FormInst | null>(null)
defineProps<{ msg: string }>()
import axios from "axios";

import { info,mockTest } from "@/api"
import { useRoute } from "vue-router"
const route = useRoute();
 
let loading = ref<boolean>(false);
let sidebar = ref<any>({});
 
const _fetch = async (): Promise<void> => {
    const routeName = route.name as string;
    const path = '/upms/user/info'
    try {
        loading.value = true;
        // const res = await info({ path, routeName });
        // if (!res || !res.data) return;
        // sidebar.value = res.data;
        // console.log(sidebar.value);
      // console.log(res);
        const res = await mockTest()
        console.log(res);
    } finally {
        loading.value = false
    }
}
 
onBeforeMount(() => {
  _fetch()
  // //get请求


})
</script>
-->



<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { FormInst,NForm } from 'naive-ui'
import { login } from "@/api"
import axios from "axios";
import router from '@/router';
const loading = ref<boolean>(false);
const formRef = ref<FormInst | null>(null)
const message = window.$message
const formData = ref({
        user: {
          username: '',
          password: ''
        },
      })
const rules = {
  user: {
    username: {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    },
    password: {
      required: true,
      message: '请输入密码',
      trigger: ['input', 'blur']
    }
  },
}
const routerList = [
  {
    name: 'dashboard',
    title: '测试页面',
		children: [
      {
        name: 'home',
        title: '看板'
        },
      {
        name: 'test',
        title: '测试页面'
      },
		]
  }
]

const loginSubmit  = async () => {
  //     const res = await login(formData.value);
  // console.log(res);
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      loading.value = true
      
      axios.post("/login",formData.value.user).then((res) => {
        if (res.data.code === 200) {
          localStorage.setItem('token', res.data.data.token)
          localStorage.setItem('router',JSON.stringify(routerList))
          message.success('登录成功')
          router.push({name:'/'})
        }
        else {
          message.error(res.data.msg)
        }
        loading.value = false
      });
    } else {
      console.log(errors)
      message.error('请输入账号密码')
    }
  })
      
    }
</script>
<style lang="less" scoped>
.login-part{
  width: 25vw;
}
</style>